$(function () {
    // 获取本地存储中的信息 
    let shoppingCart = JSON.parse(localStorage.getItem("shoppingCart")) || [];

    if (shoppingCart.length === 0) {
        alert("购物车空空如何");
    }


    // 获取tbody ,之后在tbody前面添加
    let $tbody = $("tbody");

    // 根据购物车里的信息 显示内容
    shoppingCart.forEach((value, index) => {
        //.reverse倒序
        //在HTML前面添加
        $tbody.prepend(`
        <tr>
        <td>
            <input type="checkbox" class="check">
        </td>
        <td class="num">${shoppingCart.length - index}</td>
        <td>${value.cat_id}</td>
        <td>
            <span>
                <input type="button" value="-" class="reduces"  data-id="${value.goods_id}">
                <span class="span">${value.num}</span>
                <input type="button" value="+" class="adds" data-id="${value.goods_id}"> 
            </span>
        </td>
        <td>单价：
            <span class="price">${value.goods_price}</span>
        </td>
        <td>
            小计：
            <span class="prices">${value.goods_price * value.num}</span>
        </td>
        <td>
            <a href="#"  data-id="${value.goods_id}" class="del">删除</a>
        </td>
    </tr>
        
        `)
    })

    $(".adds").each(function () { //点击增加的按钮
        $(this).click(function () {
            // 获取本地存储中的对应的商品  并数量+1
            // 获取id
            let id = $(this).data("id");
            let goods = shoppingCart.find(value => +value.goods_id === id);
            goods.num++;
            // 放回本地存储
            localStorage.setItem("shoppingCart", JSON.stringify(shoppingCart));

            //1.改变数量 
            var count = parseFloat($(this).parents("tr").find(".span").html());
            count++;
            $(this).parent("span").find(".span").html(count);
            //2.改小计(先找到单价与数量，再相乘，最后放在小计(“.prices”)里)
            var price = parseFloat($(this).parents("tr").find(".price").html());
            var money = (price * count);
            $(this).parents("tr").find(".prices").html(money);
            //3.改总价
            total();
            countAll();//最后的总数量
            compare();//选中复选框时比较商品单价中最高的
        });
    });
    $(".reduces").each(function () {//点击减少的按钮
        $(this).click(function () {



            //1.改变数量 
            var count = parseFloat($(this).parents("tr").find(".span").html());
            count--;
            if (count < 1) { //当数量减到1时不能再减
                return;
            }
            // 获取本地存储中的对应的商品 并数量减1
            // 获取id
            let id = $(this).data("id");
            let goods = shoppingCart.find(value => +value.goods_id === id);
            goods.num--;
            
            // 放回本地存储
            localStorage.setItem("shoppingCart", JSON.stringify(shoppingCart));


            $(this).parent("span").find(".span").html(count);
            //2.改小计
            var price = parseFloat($(this).parents("tr").find(".price").html());
            var money = (price * count);
            $(this).parents("tr").find(".prices").html(money);
            total();
            countAll();//最后的总数量
            compare();//选中复选框时比较商品单价中最高的
        });
    });
    //删除
    $(".del").each(function () {
        $(this).click(function () {
            let re = $(this).parents("tr"); //找到要删除的行
            if (confirm("你确定删除吗？")) {
                re.remove();
                // 将本地存储中的数据一并删除
                // 获取id
                let id = $(this).data("id");
                console.log(id);
                let idx = shoppingCart.findIndex(value => +value.goods_id === id);
                //findIndex;查找shoppingCart的下标
                // 找到点击后,本地存储购物车之中对应的id
                console.log(idx);
                shoppingCart.splice(idx, 1);
                //splice参数1.操作位置,2.删除个数,3.增加的成员
                // 放回本地存储
                localStorage.setItem("shoppingCart", JSON.stringify(shoppingCart));






            }
            total();
            countAll(); //总数量
            compare(); //最贵的
            //删除后重新排序号
            for (let i = 0; i < $(".num").length; i++) {
                $(".num")[i].innerHTML = i + 1;
            }
            //全都删除时清空table(通过获取tbody的高度来判断)
            let clear = $("tbody").height();
            if (clear == 50) {
                $("table").remove();
                $(".empty").css({ //删完时显示"购物车为空"这个盒子
                    display: "block"
                });
            }
        });
    });
    //合计
    function total() {
        let sum = 0;
        $(".prices").each(function () {//先循环每个小计
            if (($(this).parents("tr").find(".check")).prop("checked")) {//判断复选框有没有选中
                sum += parseFloat($(this).html());
            }
            $(".pricetal").html(sum);
        });
    }
    //总数量
    function countAll() {
        let counts = 0;
        for (let i = 0; i < $(".check").length; i++) {
            if ($(".check")[i].checked == true) { //注意此块用jquery不好实现
                counts += parseInt($('.span')[i].innerHTML);
            }
        }
        $(".goods_num")[0].innerHTML = counts;
    }
    //最贵商品比较
    function compare() {
        let temp = 0;
        for (let i = 0; i < $(".price").length; i++) { //循环单价
            if ($(".check")[i].checked == true) {
                var temps = parseFloat($(".price")[i].innerHTML);
                if (temps > temp) {
                    temp = temps;
                }
            }
        };
        $(".pricest").html(temp);
    }
    //全选插件(引入插件Allcheck.js)
    $(".checkOnly").bindCheck($("#table :checkbox"));
    //当点击复选框时调用total()
    $(".check").each(function () {
        $(this).click(function () {
            let num = 0;
            $(".check").each(function () {
                if ($(this).prop("checked")) {
                    num++;
                }
                countAll();
                total();
                compare(); //最贵的
            });
            if (num == $(".check").length) {//如果复选框的长度与num相等时，全选那个按钮也会被选中
                $(".checkOnly")[0].checked = true;
                compare(); //最贵的
                countAll(); //总数量
                total();
            } else {
                $(".checkOnly")[0].checked = false;
            }
        });
    });
    $(".checkOnly").click(function () {
        total();
        countAll(); //总数量
        compare(); //最贵的
    });
});